<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery左侧滑动可定位网页</title>
    <link rel="stylesheet" href="css/css.css" type="text/css" media="all" />
    <script type="text/javascript" src="../../vendor/jQuery-1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="../dst/pagescroller.jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var pageScroller=$('#wrapper').pageScroller({});

            // assigns "next" API function to button
            $('.next').click(function(e){
                e.preventDefault();
                pageScroller.next();
            });
            //assigns "prev" API function to button
            $('.prev').click(function(e){
                e.preventDefault();
                pageScroller.prev();
            });
            $('.jumpTo').click(function(e){
                e.preventDefault();
                pageScroller.goto(3);
            });
        });
    </script>
</head>
<body>
<div style="position:absolute;top:0;bottom:0;left:300px;right:0;overflow: auto;" id="scrollBox">

    <div id="controls" class="light">
        <a href="#" class="prev"><img src="images/icon_arrow-up_light.png" alt="" width="28" height="31" /></a>
        <a href="#" class="next"><img src="images/icon_arrow-down_light.png" alt="" width="28" height="31" /></a>
    </div>

    <div id="wrapper" style="position:absolute; top:25px; bottom:25px; left:5px; right:5px; overflow: auto;">
        <!--<div style="position:relative;">-->
            <div style="height:200px; background: pink;"><h1>before 1</h1></div>
            <div class="section"><h1>Section 1</h1></div>
            <div class="section"><h1>Section 2 - <a href="#" class="jumpTo">Jump To 4</a></h1></div>
            <div class="section"><h1>Section 3</h1></div>
            <div class="section"><h1>Section 4</h1></div>
            <div class="section"><h1>Section 5</h1></div>
            <div class="section"><h1>Section 6</h1></div>
            <div class="section"><h1>Section 7</h1></div>
            <div class="section"><h1>Section 8</h1></div>
            <div class="section"><h1>Section 9</h1></div>
            <div class="section"><h1>Section 10</h1></div>
            <div class="section"><h1>Section 11</h1></div>
            <div style="height:500px; background: pink;"><h1>after 5</h1></div>
        <!--</div>-->
    </div><!-- [END] #wrapper -->

</div>

</body><!-- [END] body -->
</html><!-- [END] html -->